/**
 * @author nttdocomo
 */
define(function(require) {
	require('./view');
	require("../jquery.ui.position");
	aries.klass("aries.view.BoundList", aries.view.View.extend({
		baseCls : aries.baseCSSPrefix + 'boundlist',
		itemCls : aries.baseCSSPrefix + 'boundlist-item',
		listItemCls : '',
		childEls : ['listEl'],

		renderTpl : ['<div id="<%=id%>-listEl" class="<%=baseCls%>-list-ct" style="overflow:auto"></div>'/*, '{%', 'var me=values.$comp, pagingToolbar=me.pagingToolbar;', 'if (pagingToolbar) {', 'pagingToolbar.ownerLayout = me.componentLayout;', 'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);', '}', '%}', {
		 disableFormats : true
		 }*/].join(''),

		/**
		 * A method that returns the inner template for displaying items in the list.
		 * This method is useful to override when using a more complex display value, for example
		 * inserting an icon along with the text.
		 * @param {String} displayField The {@link #displayField} for the BoundList.
		 * @return {String} The inner template
		 */
		getInnerTpl : function(displayField) {
			return '<%=item.' + displayField + '%>';
		},

		getTargetEl : function() {
			return this.listEl || this.$el;
		},

		/**
		 * @cfg {String/Ext.XTemplate} tpl
		 * A String or Ext.XTemplate instance to apply to inner template.
		 *
		 * {@link Ext.view.BoundList} is used for the dropdown list of {@link Ext.form.field.ComboBox}.
		 * To customize the template you can do this:
		 *
		 *     Ext.create('Ext.form.field.ComboBox', {
		 *         fieldLabel   : 'State',
		 *         queryMode    : 'local',
		 *         displayField : 'text',
		 *         valueField   : 'abbr',
		 *         store        : Ext.create('StateStore', {
		 *             fields : ['abbr', 'text'],
		 *             data   : [
		 *                 {"abbr":"AL", "name":"Alabama"},
		 *                 {"abbr":"AK", "name":"Alaska"},
		 *                 {"abbr":"AZ", "name":"Arizona"}
		 *                 //...
		 *             ]
		 *         }),
		 *         listConfig : {
		 *             tpl : '<tpl for="."><div class="x-boundlist-item">{abbr}</div></tpl>'
		 *         }
		 *     });
		 *
		 * Defaults to:
		 *
		 *     Ext.create('Ext.XTemplate',
		 *         '<ul><tpl for=".">',
		 *             '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
		 *         '</tpl></ul>'
		 *     );
		 *
		 */

		initComponent : function() {
			var me = this, baseCls = me.baseCls, itemCls = me.itemCls;

			me.selectedItemCls = baseCls + '-selected';
			me.overItemCls = baseCls + '-item-over';
			me.itemSelector = "." + itemCls;

			if (me.floating) {
				me.addCls(baseCls + '-floating');
			}

			if (!me.tpl) {
				// should be setting aria-posinset based on entire set of data
				// not filtered set
				me.tpl = '<ul class="unstyled"><%_.each(data,function(item,i){%><li role="option" class="' + itemCls + '" data-cid="c<%=i%>">' + me.getInnerTpl(me.displayField) + '</li><%})%></ul>';
			} else if (Ext.isString(me.tpl)) {
				me.tpl = me.tpl;
			}

			if (me.pageSize) {
				me.pagingToolbar = me.createPagingToolbar();
			}

			aries.view.View.prototype.initComponent.apply(this, arguments);
		}, /*
		 initRenderData : function() {
		 var config = aries.view.View.prototype.initRenderData.apply(this, arguments);
		 return $.extend(config, {
		 content : this.tpl({
		 store : this.pickerField.store.toJSON()
		 })
		 });
		 },*/

		refresh : function() {
			var me = this, toolbar = me.pagingToolbar;

			aries.view.View.prototype.refresh.apply(this, arguments);
			// The view removes the targetEl from the DOM before updating the template
			// Ensure the toolbar goes to the end
			if (me.rendered && toolbar && !me.preserveScrollOnRefresh) {
				me.el.appendChild(toolbar.el);
			}
		},
		setHeight : function(height) {
			aries.view.View.prototype.setHeight.apply(this, arguments)
			height = this.$el.height()
			this.listEl.height(height)
		}
	}))
})
